<header class="page-header">
  <div class="level">
    <div class="level-left">
      <h1 class="title is-3">
        Enable a secrets engine
      </h1>
    </div>
  </div>
</header>
<form {{action "mountBackend" on="submit"}}>
  <div class="box is-sideless is-fullwidth is-marginless">
    {{message-error model=model}}
    <div class="field">
      <label for="backend-type" class="is-label">Secrets engine type</label>
      <div class="control is-expanded">
        <div class="select is-fullwidth">
          <select
             id="backend-type"
             value={{selectedType}}
             onchange={{action "onTypeChange" value="target.value"}}
            data-test-secret-backend-type=true
          >
            {{#each mountTypes as |backend|}}
              <option selected={{eq selectedType backend}} value="{{backend.value}}">
                {{backend.label}}{{if backend.deprecated " (deprecated)"}}
              </option>
            {{/each}}
          </select>
        </div>
      </div>
    </div>
    {{#if selection.deprecated}}
      <div class="message is-warning is-small">
        <div class="message-body">
          The {{selection.label}} backend is deprecated! If you are using a SQL database backend, use the general purpose {{#doc-link path="/secrets/databases/index.html"}}Databases{{/doc-link}} backend instead.
        </div>
      </div>
    {{/if}}
    <div class="field">
      <label for="backend-path" class="is-label">Path</label>
      <div class="control">
        {{input value=selectedPath class="input" id="backend-path" data-test-secret-backend-path=true}}
      </div>
    </div>
    <div class="field">
      <label for="backend-description" class="is-label">Description</label>
      <div class="control">
        {{textarea class="editor" value=description id="backend-description" class="textarea"}}
      </div>
    </div>
    {{#if (eq selectedType "kv")}}
      <div class="field">
        <label for="version" class="is-label">
          Version
        </label>
        <div class="control is-expanded">
          <div class="select is-fullwidth">
            <select
               data-test-secret-backend-version
               id="backend-type"
               value={{selectedType}}
               onchange={{action (mut version) value="target.value"}}
            >
              {{#each (array 1 2) as |versionOption|}}
                <option selected={{eq version versionOption}} value={{versionOption}}>
                Version {{versionOption}}
                </option>
              {{/each}}
            </select>
          </div>
        </div>
        <p class="help has-text-grey">
          The KV Secrets engine can operate in different modes. Version 1 is the original generic secrets engine the allows for storing of static key/value pairs. Version 2 added more features including data versioning, TTLs, and check and set.
        </p>
      </div>
    {{/if}}
    <div class="field">
      <div class="b-checkbox">
        {{input type="checkbox" id="local" name="local" checked=local}}
        <label for="local" class="is-label">
          Local
        </label>
        <p class="help has-text-grey">
          When replication is enabled, a local mount will not be replicated across clusters. <em>This can only be specified at mount time</em>.
        </p>
      </div>
    </div>

    <div class="field">
      <div class="b-checkbox">
        {{input type="checkbox" id="sealWrap" name="sealWrap" checked=sealWrap}}
        <label for="sealWrap" class="is-label">
          Seal Wrap
        </label>
        <p class="help has-text-grey">
          When enabled - if a seal supporting seal wrapping is specified in the configuration, all critical security parameters (CSPs) in this backend will be seal wrapped. (For K/V mounts, all values will be seal wrapped.) <em>This can only be specified at mount time</em>.
        </p>
      </div>
    </div>
    <div class="field">
      {{toggle-button toggleTarget=this toggleAttr="showConfig" data-test-secret-backend-options=true}}
      {{#if showConfig}}
        <div class="box is-marginless">
          {{ttl-picker data-test-secret-backend-default-ttl=true labelText='Default lease TTL' onChange=(action (mut default_lease_ttl))}}
          {{ttl-picker data-test-secret-backend-max-ttl labelText='Maximum lease TTL' onChange=(action (mut max_lease_ttl))}}
        </div>
      {{/if}}
    </div>
  </div>
  <div class="field is-grouped box is-fullwidth is-bottomless">
    <button type="submit" data-test-secret-backend-submit=true class="button is-primary">
      Enable Engine
    </button>
  </div>
</form>
